<!DOCTYPE html>
<html>

	<head>

		<title>一键排版首页</title>
		<include file="public@head"/>

	</head>

	<body>
		<div class="pages">
			<include file="public@nav"/>

			<div class="content">
				<div class="inside-banner account-banner"></div>
				<!--合作流程-->
				<div class="section">
					<div class="htitle intro-title">
						<h3>合作流程</h3>
						<h4>Cooperation process</h4>
					</div>
					<div class="wrapper">
						<div class="process-tu">
							<div class="process-img">
								<img src="__TMPL__/public/assets/images/process.png" alt="合作流程">
							</div>
						</div>
						<div class="process-tips">
							<p>一键排版软件是为出版业开发的一款个性化、多样化、定制化、</p>
							<p>专业化的编排软件。并实现了从文件上传，在线自动编排，章节、栏目自动转接合并，生成转接页码，</p>
							<p>生成页眉、页脚和目录。</p>
						</div>

					</div>
					<div class="htitle intro-title">
						<h3>互联网时代排版需求</h3>
						<h4>Demand for typesetting in the Internet Age</h4>
					</div>
					<div class="demand-box">
						<div class="wrapper">
							<ul class="demand-list clearfix">
								<li>
									<span>便捷排版</span>
								</li>
								<li>
									<span>实用高效</span>
								</li>
								<li>
									<span>安全可靠</span>
								</li>
								<li>
									<span>操作简单</span>
								</li>
								<li>
									<span>后期保障</span>
								</li>
							</ul>
						</div>
						<div class="process-tips">
							<p>传统编排软件在自身软件环境上运用复杂、效率低下、兼容性差，在硬件环境上更依赖于线下和</p>
							<p>专业软件技术人员，极大增加了出版行业的时间成本、人力成本、资金成本、社会成本等，并伴随着相应的资</p>
							<p>源浪费，延长了出版周期，延误了服务科研、服务文化的进程。</p>
						</div>
					</div>
					<div class="htitle intro-title">
						<h3>一键排版可以帮你做什么</h3>
						<h4>What can I do for you</h4>
					</div>

					<div class="wrapper carousel">
						<div class="carousel-view">
							<ul class="carousel-imgs">
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what01.png" alt="一键排版">
									</div>
									<p>平台式管理、独立系统、安全便捷，无需下载安装或升级</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what02.png" alt="一键排版">
									</div>
									<p>系统自动数据识别，文件识别，</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what03.png" alt="一键排版">
									</div>
									<p>智能在线编排，节省人工、提高效率</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what04.png" alt="一键排版">
									</div>
									<p>平台式管理、独立系统、安全便捷，无需下载安装或升级</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what05.jpg" alt="一键排版">
									</div>
									<p>平台式管理、独立系统、安全便捷，无需下载安装或升级</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what06.jpg" alt="一键排版">
									</div>
									<p>平台式管理、独立系统、安全便捷，无需下载安装或升级</p>
								</li>
								<li>
									<div class="thumbnail-w">
										<img src="__TMPL__/public/assets/images/what07.jpg" alt="一键排版">
									</div>
									<p>平台式管理、独立系统、安全便捷，无需下载安装或升级</p>
								</li>
							</ul>
						</div>

						<!--按钮-->
						<div class="carousel-btn">
							<a class="prev" href="javascript:void(0);"></a>
							<a class="next" href="javascript:void(0);"></a>
						</div>

					</div>



				</div>


			</div>
		</div>
		<!--主体END-->

		<include file="public@footer"/>

		</div>

		<include file="public@scripts"/>

		<script>
			$(function () {
				var layer = null;
				layui.use('layer', function () {
					layer = layui.layer;
				});

				!function(){
					var $imgs=$(".carousel-imgs"),
						$imgLi=$imgs.find('li'),
						$prev=$(".carousel-btn .prev"),
						$next=$(".carousel-btn .next");

					var width=$imgLi.outerWidth(true);
					length=$imgLi.length;
					left=$imgs.position().left;
					var index=0,
						stand=length%4;

					$imgs.width(length*width);
					console.log(left);
					$prev.on('click',function(){
						index--;
						index=(index<0)?stand:index;
						var distance=width*index-left;
						move($imgs,-distance);
					});
					$next.on('click',function(){
						index++;
						index=(index>stand)?0:index;
						var distance=width*index-left;
						move($imgs,-distance);
					})


				}();

				function move($imgs,distance){
					$imgs.stop().animate({left:distance});
				}


			});

		</script>
	</body>

</html>